<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
  <div class="box"></div>
  <ul></ul>
<body>
  <script>
    const ul = document.querySelector('ul')
    const box = document.querySelector('.box')

    let str = ''
    for (let i = 1; i <= 10; i++) {
      str += `<button data-page="${i}">${i}</button>`
    }
    box.innerHTML = str

    box.addEventListener('click', e => {
      if (e.target.nodeName === 'BUTTON') {
        const page = e.target.getAttribute('data-page')
        console.log(page)
        getList((page - 1) * 10)
      }
    })

    // http://zyxcl.xyz/music/api/search


    // 请求方式：get、post、put、delete、option

    // get 请求
    // 给后端传参数通过url ? 后拼接，多个参数通过 & 链接

    // post 请求
    // 传参数通过 send 方法发送请求体 body 给后端，
    // 使用post请求时需要设置请求头通知传给后端的参数类型

    function getList(offset) {
      const xhr = new XMLHttpRequest()
      xhr.open('post', `http://zyxcl.xyz/music/api/top/playlist`, true)
      // 等待请求响应
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText)
            console.log(data.playlists)
            ul.innerHTML = data.playlists.map(it => {
              return `<li>${it.name}</li>`
            })
          } else {
            alert('请求失败:' + xhr.status)
          }
        }
      }
      

      // json 格式
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(JSON.stringify({
        limit: 10,
        offset
      }))

      // form-urlencoded类型
      // 设置请求头，通知后端参数类型
      // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      // // 发送请求
      // xhr.send(`limit=10&offset=${offset}`)


      // form-data
      // const params = new FormData()
      // params.append('limit', 10)
      // params.append('offset', offset)
      // xhr.send(params)

    }

    getList(0)


    // 常见的get请求
    // script、link、img、a、ajax get请求


    // 状态码
    // 200: 成功
    // 301: 永久重定向
    // 302: 临时重定向
    // 304: 协商缓存
    // 400: 请求错误，请求的方式、参数错误
    // 401: 用户信息失效
    // 403: 没有权限
    // 404: 找不到访问的地址
    // 500: 服务器内部错误


  </script>
</body>
</html>
<!-- 
产品经理 PM：产出需求文档
视觉设计 UI：设计页面
交互设计 UE：页面交互逻辑
前端 FE：用户页面，展示用户数据，html、css、js
后端 RD：数据来源
测试 QA：测试功能
-->